<template>
  <div>
    <div style="border-bottom:1px solid #3F72AA;">
      <el-form label-width="auto" label-position="left">
        <div style="padding-left:6px;margin-bottom:6px">
          <div class="titleStyle">
            预报时间
          </div>
          <el-date-picker v-model="TimeRain" type="datetimerange" start-placeholder="开始日期" range-separator="至"
            end-placeholder="结束日期" style="width: 100%" format="yyyy-MM-dd HH:mm" value-format="yyyy-MM-dd HH:mm"
            :default-time="[timebeg, timeend]" @change="selectTime" prefix-icon="el-icon-date" />
        </div>
        <div style="padding-left:6px">
          <div class="titleStyle">预报</div>
          <p class=" yubjy">
            <el-radio-group v-model="Step" @change="handleClick">
              <!-- <el-radio label="1">1h</el-radio> -->
              <el-radio label="2">2h</el-radio>
              <!-- <el-radio label="3">3h预报</el-radio> -->
              <!-- <el-radio label="6">6h</el-radio> -->
              <!-- <el-radio label="12">12h</el-radio> -->
              <el-radio label="24">24h</el-radio>
              <el-radio label="72">未来3天</el-radio>
            </el-radio-group>
            <!-- <el-radio-group class="m-t-5" v-model="Step" @change="handleClick">
            <el-radio label="6">6h预报</el-radio>
            <el-radio label="12">12h预报</el-radio>
            <el-radio label="24">24h预报</el-radio>
          </el-radio-group> -->
          </p>
        </div>

      </el-form>
    </div>
    <div class="collapse_table">
      <ul>
        <li v-for="(item, index) in dataListYbjy" :key="index" :class="{ activeList: selectNum == index }"
          @click="ListClick(item, index)">
          <p>
            <img src="../../../../assets/newimg/fk.png" alt="" style="margin-right: 4px;"> 预报时间：<span>{{ item.sinceTime |
              dateformat }}</span>
          </p>
          <p>
            <img src="../../../../assets/newimg/fk.png" alt="" style="margin-right: 4px;"> 降雨时段：<span
              style="letter-spacing:-1px">{{ item.sinceTime | dateformat }} - {{ item.endSINCETIME | dateformat }}</span>
          </p>
          <!-- <p v-if="Step!='1'&&Step!='3'"> -->
          <p>
            <!-- 流域平均降雨量：<span>{{ item.drp || 0 }}mm</span> -->
            <img src="../../../../assets/newimg/fk.png" alt="" style="margin-right: 4px;"> 网格最大雨量：<span>{{ item.drp || 0
            }}mm</span>
          </p>
        </li>
        <infinite-loading ref="infiniteLoading" @infinite="infiniteHandler">
          <span slot="no-more"> &nbsp; &nbsp; </span>
          <template v-if="dataListYbjy.length <= 0">
            <div slot="no-results" class="noData">当前无降雨</div>
          </template>
          <div v-else slot="no-results"> &nbsp; &nbsp;</div>
        </infinite-loading>
      </ul>
    </div>
  </div>
</template>
<script>
import { GetWeatherRain, GetShortRain3H } from '@/api/xuna.js'
import { mapGetters } from 'vuex'
import rainPrediction from '@/map/cesium/mixins/rainPrediction'
export default {
  mixins: [rainPrediction],
  data() {
    return {
      selectNum: -1,
      // Step: '6',
      Step: '2',
      timebeg: this.$moment(this.$store.getters.startTimeCommon).format('HH:mm:ss'),
      timeend: this.$moment(this.$store.getters.endTimeCommon).format('HH:mm:ss'),
      TimeRain: [this.$store.getters.startTimeCommon, this.$store.getters.endTimeCommon],
      limit: 10,
      page: 1,
      WSWSCD: '',
      dataListYbjy: []
    }
  },
  computed: {
    ...mapGetters({
      basin: 'basin'
    })
  },
  watch: {
    'basin': {
      immediate: true,
      deep: true,
      handler(val) {
        this.WSWSCD = val
        this.resetList()
      }
    }

  },
  beforeDestroy() {
    this.$eventBus.$off('FZCINFO')
    this.$eventBus.$emit('EB_YB_Ladar', '重置')
  },
  created() {

  },
  mounted() {
    this.$eventBus.$on('FZCINFO', res => {
      let ind = this.selectNum;
      let lit = this.dataListYbjy;

      let arlit = {};
      if (lit.length) {
        arlit = lit[ind];
      }
      let stbeigin = arlit.sinceTime ? this.$moment(arlit.sinceTime).format('YYYY-MM-DD HH:mm') : '';
      let stend = arlit.endSINCETIME ? this.$moment(arlit.endSINCETIME).format('YYYY-MM-DD HH:mm') : '';
      this.$store.getters.dlgParams.params = {
        'Ewcode': res.ADCD,
        'strBegin': stbeigin ? stbeigin : this.TimeRain[0],
        'strEnd': stend ? stend : this.TimeRain[1],
      };
      // console.log(this.$store.getters.dlgParams.params)
      this.$store.getters.dlgParams.name = 'FZCCuZINFO'
    })
  },
  methods: {
    // 列表点击
    ListClick(item, index) {
      this.selectNum = index

      const param = {
        dtBegin: this.$moment(item.sinceTime).format('YYYY-MM-DD HH:mm'),
        dtEnd: this.$moment(item.endSINCETIME).format('YYYY-MM-DD HH:mm'),
        wswscd: this.WSWSCD,
        Step: this.Step
      }
      this.$eventBus.$emit('EB_YB_Mesh_CardSel', { id: item.id, step: item.step })
      this.$eventBus.$emit('GetRadarParams', param)
    },
    // 加载更多
    infiniteHandler($state) {
      const step = this.Step
      this.getData($state)
      // if(step!='1'&&step!='3'){
      //    this.getData($state)
      // }else{
      //    this.get1h3hData($state);
      // }
    },
    // 自定义时间
    selectTime(val) {
      if (val) {
        this.TimeRain = val
        this.$store.dispatch('startTimeCommon', val[0])
        this.$store.dispatch('endTimeCommon', val[1])
        this.resetList()
      } else {
        this.beginDate = ''
        this.endDate = ''
      }
    },

    // 时长切换
    handleClick(val) {
      this.Step = val
      // if (val === '1') {
      //     this.$eventBus.$emit('EB_YB_YB_dis', false)
      //     this.$eventBus.$emit('EB_YB_LD_dis', true)
      //     this.hidePredictionRain()
      // } else {
      //     this.$eventBus.$emit('EB_YB_YB_dis', true)
      // }
      this.$eventBus.$emit('EB_YB_YB_dis', true)
      this.hidePredictionRain()
      this.clearImgYBJYLadar()
      this.resetList()
    },
    // 重置
    resetList() {
      this.page = 1
      this.dataListYbjy = []
      this.selectNum = -1
      this.$nextTick(() => {
        this.$refs.infiniteLoading.$emit('$InfiniteLoading:reset')
      })
    },
    // 加载数据
    getData($state) {
      this.isLoading = true
      const param = {
        dtBegin: this.TimeRain[0],
        dtEnd: this.TimeRain[1],
        wswscd: this.WSWSCD,
        Step: this.Step,
        limit: this.limit,
        page: this.page
      }
      // this.$eventBus.$emit('GetRadarParams', param)
      GetWeatherRain(param).then((res) => {
        this.isLoading = false
        if (res.isSuccess) {
          if (this.dataListYbjy.length == 0) {
            if (res.data.length) {
              this.ListClick(res.data[0], 0)
            }
          }
          if ($state) {
            if (!res.data || res.data.length < this.limit) {
              const arr = res.data
              if (arr.length) {
                this.dataListYbjy = [...this.dataListYbjy, ...arr]
              }
              $state.complete() // 加载完成的状态
            } else {
              const arr = res.data
              this.dataListYbjy = [...this.dataListYbjy, ...arr]
              $state.loaded() // 加载中的状态
            }
            this.page++
          } else {
            this.dataListYbjy = res.data
            // $state.complete()   //加载完成的状态
          }
        } else {
          this.$message.error(res.message)
          $state.complete() // 加载完成的状态
        }
      }).catch(err => {

      })
    },
    // 加载1H 3H预报 数据
    get1h3hData($state) {
      this.isLoading = true
      const param = {
        dtBegin: this.TimeRain[0],
        dtEnd: this.TimeRain[1],
        Step: this.Step,
        limit: this.limit,
        page: this.page
      }
      GetShortRain3H(param).then((res) => {
        this.isLoading = false
        if (res.isSuccess) {
          if ($state) {
            if (!res.data || res.data.length < this.limit) {
              const arr = res.data
              if (arr.length) {
                this.dataListYbjy = [...this.dataListYbjy, ...arr]
              }
              $state.complete() // 加载完成的状态
            } else {
              const arr = res.data
              this.dataListYbjy = [...this.dataListYbjy, ...arr]
              $state.loaded() // 加载中的状态
            }
            this.page++
          } else {
            this.dataListYbjy = res.data
            // $state.complete()   //加载完成的状态
          }
        } else {
          this.$message.error(res.message)
          $state.complete() // 加载完成的状态
        }
      }).catch(err => {

      })
    }

  }
}
</script>
<style lang="less" scoped>
.yubjybox {
  /deep/ .el-form-item__label {
    line-height: 26px;
  }

}

.yubjy {
  text-align: center;

  .el-radio-group {
    display: flex;
    width: 100%;
    //justify-content: space-between;
    justify-content: start;
    margin-left: 0px;

    /deep/.el-radio {
      display: inline-block;
      text-align: center;
      margin-right: 0px;
    }

    label {
      // width: 22%;
      width: 16%;
      padding-top: 5px;
      padding-bottom: 5px;

      /deep/.el-radio__label {
        padding-left: 3px;
        letter-spacing: -1px;
        vertical-align: bottom;
      }

      /deep/.el-radio__input {
        height: 0.875rem;
      }
    }
  }
}

.titleStyle {
  font-size: 14px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #FFFFFF;
  opacity: 0.8;
  text-shadow: 0px 3px 2px rgba(0, 14, 17, 0.19);
  margin-bottom: 6px
}

.isShowtopflg .collapse_table {
  transform: translateY(10px);
  max-height: calc(100vh - 17.5rem - 14px);
}

.collapse_table>ul li {
  width: 99%;
}

/deep/ .el-date-editor {
  border: solid 1px #1E73DC;
}
</style>
